<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表单实现Input、Checkbox组件</title>
    <style>
        body {
            font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
            color: #34495e;
        }

        body {
            margin: 0;
            padding-bottom: 100px;
            font-size: 14px;
        }

        .title {
            padding: 20px 500px 60px 50px;
            background: #333333;
            color: #7d7d7d;
        }

        .title h2 {
            font-size: 38px;
            font-weight: 500;
            color: #f1f2f3;
        }

        .title sup {
            position: relative;
            top: -6px;
            left: 1px;
            padding: 1px 3px;
            background: #7d7d7d;
            color: #333333;
            border-radius: 3px;
            font-size: 13px;
        }

        .title sub {
            position: relative;
            top: -6px;
            left: -39px;
            font-size: 13px;
            color: #7d7d7d;
        }

        .container {
            width: 800px;
            padding: 10px 50px;
        }

        .container h3 {
            padding-left: 10px;
            font-size: 22px;
            font-weight: 600;
            border-left: 5px solid #000;
        }

        input {
            display: inline-block;
            width: 220px;
            padding: 6px 8px;
            margin-bottom: 20px;
            border: 1px solid #c9c9c9;
            color: #333;
            font-size: 12px;
            outline: 0;
        }

        label {
            display: inline-block;
            margin-left: 20px;
        }

        input:focus {
            border-color: #333;
        }

        input:disabled {
            background: #f1f2f3;
        }

        input.warn {
            border-width: 1px;
            border-color: #ff2f2f;
        }

        label.warn {
            color: #ff2f2f;
        }

        label.tips {
            position: absolute;
            left: 10px;
            bottom: -30px;
            background: #ffe7e3;
            color: #ff1212;
            padding: 8px 12px;
        }

        label.tips::after {
            content: '';
            display: block;
            position: absolute;
            left: 50%;
            top: -10px;
            border: 10px solid #ffe7e3;
            border-right-color: transparent;
            border-bottom-color: transparent;
            transform: rotateZ(45deg) translateY(50%);
        }

        .clearfix {
            overflow: hidden;
        }

        .item {
            width: 350px;
            float: left;
            position: relative;
        }

        .cbx {
            height: 0;
            width: 0;
            margin: 0;
            padding: 0;
        }

        .checks {
            width: 100px;
            float: left;
            text-align: center;
        }

        .checks label {
            display: inline-block;
            margin: 0;
        }

        .checks label svg {
            width: 20px;
            height: 20px;
        }
    </style>
    <script src="https://unpkg.com/san@latest/dist/san.dev.js"></script>
</head>

<body>
    <div class="wrapper">
        <div class="title">
            <h2>输入框 <sup>控件</sup> <sub>Input</sub></h2>
            <p></p>
        </div>
        <div class="container ipts">
            <h3>基础状态</h3>
        </div>
    </div>
    <div class="wrapper">
        <div class="title">
            <h2>复选框 <sup>控件</sup> <sub>Check Box</sub></h2>
            <p>复选框（Check
                Box）用于在两个或两个以上有清晰差别的选项中进行选择。复选框的标签是对选中状态的描述，而清除状态的含义必须与选中状态明确相反。因此，复选框应当仅用于切换选项的开关状态，或者是选中/取消选中一个项目。</p>
        </div>
        <div class="container cbs">
            <h3>基础形态、状态</h3>
        </div>
    </div>
    <!-- <svg t="1522742656342" class="icon" style="" viewBox="0 0 1024 1024" version="1.1"
        xmlns="http://www.w3.org/2000/svg" p-id="1942" xmlns:xlink="http://www.w3.org/1999/xlink" width="200"
        height="200">
        <defs>
            <style type="text/css"></style>
        </defs>
        <path
            d="M832 928.00086l-640 0c-52.9288 0-96.00086-43.07206-96.00086-95.99914l0-640c0-52.9288 43.07206-96.00086 96.00086-96.00086l640 0c52.92708 0 95.99914 43.07206 95.99914 96.00086l0 640C928.00086 884.9288 884.9288 928.00086 832 928.00086zM192 160.00086c-17.632039 0-32.00086 14.368821-32.00086 32.00086l0 640c0 17.664722 14.368821 31.99914 32.00086 31.99914l640 0c17.664722 0 31.99914-14.336138 31.99914-31.99914l0-640c0-17.632039-14.336138-32.00086-31.99914-32.00086L192 160.00086z"
            p-id="1943"></path>
    </svg>

    <svg t="1522742638607" class="icon" style="" viewBox="0 0 1024 1024" version="1.1"
        xmlns="http://www.w3.org/2000/svg" p-id="1828" xmlns:xlink="http://www.w3.org/1999/xlink" width="200"
        height="200">
        <defs>
            <style type="text/css"></style>
        </defs>
        <path
            d="M832 96.00086l-640 0c-52.9288 0-96.00086 43.07206-96.00086 96.00086l0 640c0 52.92708 43.07206 95.99914 96.00086 95.99914l640 0c52.92708 0 95.99914-43.07206 95.99914-95.99914l0-640C928.00086 139.0712 884.9288 96.00086 832 96.00086zM727.231286 438.432254 471.00766 697.439161c-0.063647 0.063647-0.192662 0.096331-0.25631 0.192662-0.096331 0.063647-0.096331 0.192662-0.192662 0.25631-2.048757 1.983389-4.575729 3.19957-6.944443 4.544765-1.183497 0.672598-2.143368 1.696116-3.392232 2.176052-3.839484 1.536138-7.904314 2.33603-11.967424 2.33603-4.095794 0-8.224271-0.799892-12.096439-2.399677-1.279828-0.543583-2.303346-1.632469-3.519527-2.303346-2.368714-1.343475-4.832039-2.528692-6.880796-4.544765-0.063647-0.063647-0.096331-0.192662-0.159978-0.25631-0.063647-0.096331-0.192662-0.096331-0.25631-0.192662l-126.016611-129.503454c-12.320065-12.672705-12.032791-32.928047 0.639914-45.248112 12.672705-12.287381 32.895364-12.063755 45.248112 0.639914l103.26354 106.112189 233.279613-235.808305c12.416396-12.576374 32.704421-12.672705 45.248112-0.25631C739.520387 405.631501 739.647682 425.888563 727.231286 438.432254z"
            p-id="1829"></path>
    </svg> -->

    <script>
        var SanInput = san.defineComponent({
            template: `
            <div class="item">
                <input class="{{iptcls}}" disabled="{{disabled}}" on-input="on-input" value="{= value =}" placeholder="{{ placehold }}" type="text">
                <label class="{{lbcls}}" class="default">{{ lbtext }}</label>
            </div>
            `,
            initData: function () {
                return {
                    placehold: '',
                    value: '',
                    lbtext: '',
                    disabled: false,
                    iptcls: '',
                    lbcls: ''
                }
            },
            attached: function () {

            }
        });
        var MyApp = san.defineComponent({
            components: {
                'san-input': SanInput
            },
            template: `
            <div class="clearfix">
                <san-input 
                    placehold="请输入文字"
                    lbtext="常态"
                />
                <san-input 
                    placehold="请输入文字"
                    lbtext="错误提示文案"
                    iptcls="warn"
                    lbcls="warn"
                />
                <san-input 
                    placehold="请输入文字"
                    lbtext="Hover"
                />
                <san-input 
                    value="正在输入"
                    lbtext="点击输入"
                />
                <san-input 
                    placehold="请输入文字"
                    lbtext="失焦状态"
                />
                <san-input 
                    placehold="请输入文字"
                    lbtext="提示文字文字"
                    iptcls="warn"
                    lbcls="warn"
                    lbcls="tips"
                />
                <san-input 
                    placehold="请输入文字"
                    lbtext="不可用"
                    disabled="true"
                />
            </div>
            `,
            initData: function () {
                return {
                    value: ''
                }
            }
        });
        var myApp = new MyApp();
        myApp.attach(document.getElementsByClassName("ipts")[0]);

        var SanCheckbox = san.defineComponent({
            template: `
            <div class="checks">
                <input type="checkbox" name="checkbox" class="cbx">
                <label on-click="changeC">
                    <svg s-if="{{!checked}}" t="1522742656342" class="icon" style="fill: {{ disabled ? '#d8d4ce': ''}}" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="1942" xmlns:xlink="http://www.w3.org/1999/xlink" width="200"
                        height="200">
                        <defs>
                            <style type="text/css"></style>
                        </defs>
                        <path
                            d="M832 928.00086l-640 0c-52.9288 0-96.00086-43.07206-96.00086-95.99914l0-640c0-52.9288 43.07206-96.00086 96.00086-96.00086l640 0c52.92708 0 95.99914 43.07206 95.99914 96.00086l0 640C928.00086 884.9288 884.9288 928.00086 832 928.00086zM192 160.00086c-17.632039 0-32.00086 14.368821-32.00086 32.00086l0 640c0 17.664722 14.368821 31.99914 32.00086 31.99914l640 0c17.664722 0 31.99914-14.336138 31.99914-31.99914l0-640c0-17.632039-14.336138-32.00086-31.99914-32.00086L192 160.00086z"
                            p-id="1943"></path>
                    </svg>
                    <svg s-else t="1522742638607" class="icon" style="fill: {{ disabled ? '#d8d4ce': ''}}" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="1828" xmlns:xlink="http://www.w3.org/1999/xlink" width="200"
                        height="200">
                        <defs>
                            <style type="text/css"></style>
                        </defs>
                        <path
                            d="M832 96.00086l-640 0c-52.9288 0-96.00086 43.07206-96.00086 96.00086l0 640c0 52.92708 43.07206 95.99914 96.00086 95.99914l640 0c52.92708 0 95.99914-43.07206 95.99914-95.99914l0-640C928.00086 139.0712 884.9288 96.00086 832 96.00086zM727.231286 438.432254 471.00766 697.439161c-0.063647 0.063647-0.192662 0.096331-0.25631 0.192662-0.096331 0.063647-0.096331 0.192662-0.192662 0.25631-2.048757 1.983389-4.575729 3.19957-6.944443 4.544765-1.183497 0.672598-2.143368 1.696116-3.392232 2.176052-3.839484 1.536138-7.904314 2.33603-11.967424 2.33603-4.095794 0-8.224271-0.799892-12.096439-2.399677-1.279828-0.543583-2.303346-1.632469-3.519527-2.303346-2.368714-1.343475-4.832039-2.528692-6.880796-4.544765-0.063647-0.063647-0.096331-0.192662-0.159978-0.25631-0.063647-0.096331-0.192662-0.096331-0.25631-0.192662l-126.016611-129.503454c-12.320065-12.672705-12.032791-32.928047 0.639914-45.248112 12.672705-12.287381 32.895364-12.063755 45.248112 0.639914l103.26354 106.112189 233.279613-235.808305c12.416396-12.576374 32.704421-12.672705 45.248112-0.25631C739.520387 405.631501 739.647682 425.888563 727.231286 438.432254z"
                            p-id="1829"></path>
                    </svg>
                </label>
                <p>{{msg}}</p>
            </div>
            `,
            initData: function () {
                return {
                    checked: false,
                    msg: '',
                    disabled: false
                }
            },
            changeC: function () {
                if (!this.data.get('disabled')) {
                    this.data.set('checked', !this.data.get('checked'));
                }
            }
        });
        var Checks = san.defineComponent({
            components: {
                "san-checkbox": SanCheckbox
            },
            template: `
            <div class="clearfix">
                <san-checkbox
                msg="常态"
                />
                <san-checkbox
                msg="hover"
                />
                <san-checkbox
                msg="选中"
                checked="true"
                />
                <san-checkbox
                msg="无效"
                disabled="true"
                />
                <san-checkbox
                msg="必选"
                checked="true"
                disabled="true"
                />
            </div>
            `,
        });
        var checks = new Checks();
        checks.attach(document.getElementsByClassName("cbs")[0])
    </script>
</body>

</html>